<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Layui树形表格3.x演示</title>
<link rel="stylesheet" href="/layui/css/layui.css" />

</head>
<body class="">
	<div class="xm">
		<div class="xm-d2">
			<div class="xm-d2-hang1">
				<div class="pzright"
					style="width:101%;display: flex;justify-content: flex-start;float:right;">
					<p class="xm-d1-p2">
						<button th:if="${userRole} eq 'admin'" id="add" onclick="addPermission()"
							class="layui-btn layui-btn-radius btnys">
							<i class="layui-icon">&#xe608;</i>添加
						</button>
						<button class="layui-btn" id="btn-expand">全部展开</button>
						<button class="layui-btn" id="btn-fold">全部折叠</button>
						<button class="layui-btn" id="btn-refresh">刷新表格</button>
					</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="xm-d2-hang2">
				<table id="permissionTable" class="layui-table"
					lay-filter="permissionTable"></table>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript" src="/layui/layui.all.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" th:inline="javascript">

 var uName = [[${userRole}]]
    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '/layui/'
    }).extend({
        treetable: 'treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {//树桩表格参考文档：https://gitee.com/whvse/treetable-lay
            layer.load(2);
            treetable.render({
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'id',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: false,//是否默认折叠
                treeLinkage: true,//父级展开时是否自动展开所有子级
                elem: '#permissionTable',
                url: '/menu/treeList',
                page: false,
                cols: [[
                    {field: 'id', title: '编号'},
                    {field: 'name', title: '资源名称'},
                    {field: 'menuurl', title: '资源路径'},
                    {field: 'indexmenu', title: '类型',
                    	templet: function(d){
                    		if(d.resType==1){
                    			return '菜单';
                    		}else{
                    			return '按钮';
                    		}
                        }	
                    },
                    {templet: complain, title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();
        
		//触发三个button按钮
        $('#btn-expand').click(function () {
            treetable.expandAll('#permissionTable');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#permissionTable');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });
		
        
        function complain(d){//操作中显示的内容
        console.log(d);
        	if(uName=="admin"){
        		return [         		
                        '<a class="operation" lay-event="edit" href="javascript:void(0)" title="编辑">',
            	     	'<i class="layui-icon layui-icon-edit"></i></a>',
            	     	'<a class="operation" lay-event="del" href="javascript:void(0)"  title="删除">',
            	     	'<i class="layui-icon layui-icon-delete" ></i></a>',
           	     	
            	     	].join('');
        	}else{
        		return '';
        	}
        	
        }
        //监听工具条
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
			if(data.permissionName==null){
				if (layEvent === 'del') {
				 if(data.issys== 1){
					 alert(data.issys);
					 layer.msg('默认不允许删除');	
					}
					else if(data.pid== 0){
	            	 		  layer.confirm('将删除该菜单下的所有子菜单？', {
	        	    	        btn: ['确定','取消'] //按钮
			            	    }, function(){
	                   			  $.ajax({
					                    type:"post",
					                    url:"/menu/delMenu?id="+data.id,
					                    success:function(d){
					                        if(d=="success"){
					                              /* layer.msg("更新成功！"); */
									      //当你在iframe页面关闭自身时
						                //layer信息提示
						               		 layer.msg('删除成功');//下面是关键代码
						 	          		 parent.layer.closeAll();
       										 setTimeout(function () {location.reload()}, 330);
					                        }
					                      
					                    }
					                })
	             			 });
						
						 } 
						 else{
	            	 		  layer.confirm('确定要该菜单吗？', {
	        	    	        btn: ['确定','取消'] //按钮
			            	    }, function(){
	                   			  $.ajax({
					                    type:"post",
					                    url:"/menu/delMenu?id="+data.id,
					                    success:function(d){
					                        if(d=="success"){
					                              /* layer.msg("更新成功！"); */
									      //当你在iframe页面关闭自身时
						                //layer信息提示
						                layer.msg('删除成功');//下面是关键代码
						 	           parent.layer.closeAll();
       										 setTimeout(function () {location.reload()}, 330);
					                        }
					                        else{
					                            layer.msg('删除异常!');
					                        }
					                        layer.closeAll();//关闭弹窗
					                    }
					                })
	             			 });
						
						 }                            
		            } else if (layEvent === 'edit') {
		               
	                layer.open({
			            type: 2,
			            title: '修改菜单',
			            area: ['800px', '400px'], //宽高
			            fix: false, //不固定
			            maxmin: true,
			            content:'/menu/editMenu?id='+data.id
			        });
	            }
			}
        });
    });
function addPermission(){
		layer.open({
			            type: 2,
			            title: '修改菜单',
			            area: ['800px', '400px'], //宽高
			            fix: false, //不固定
			            maxmin: true,
			            content:'/menu/addMenu'
			        });

}

</script>
</html>